<template>
	<view class="content">
		<!-- 搜索加定位 -->
		<view class="v-u-search">
			<view class="v-u-search-position">
				<position ref="usernameInput2"></position>
				<view class="search-position-block" @click="details3()">
					<text class="search-position-text"> {{fixed}}</text>
					<u-icon class="search-position-icon" name="arrow-down" color="#DEE1E6" size="30"></u-icon>
				</view>
			</view>
			<view class="v-u-search-content">
				<u-search :show-action="true" action-text="取消" :animation="true" placeholder="请输入搜索内容" v-model="keyword"
					@search="search"></u-search>
			</view>
		</view>
		<!-- 热门美食 -->
		<view class="v-heat">
			<u-gap height="10" bg-color="#FFFFFF"></u-gap>
			<u-section title="热门美食" sub-title="查看更多"></u-section>
			<scroll-view class="v-heat-scroll" scroll-x>
				<!-- 热门美食item -->
				<view class="v-heat-item" v-for="heat in heatList" :key="heat.foodId">
					<view class="v-heat-item-img">
						<image class="v-heat-item-img" :lazy-load-margin="0" :lazy-load="true" :src="urlHeat + heat.foodImage3" mode="aspectFill"
							@click="gotoDetailPageByFoodId(heat.foodId)"></image>
					</view>
					<view class="item-text-all">
						<view class="v-heat-item-text">
							{{ heat.foodName }}
						</view>
						<view class="v-heat-item-text"> 位置：{{ heat.foodLocation.split('/')[1]}} </view>
						<view class="v-heat-item-grade">
							<u-rate :current="heat.foodScore" :disabled="true" active-color="#fdab2d"></u-rate>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
		<!--地区特色美食 -->
		<view class="v-recommend">
			<view class="v-recommend-head">
				<u-section title="特色美食" :right="false"></u-section>
			</view>
			<view id="boxFixed" :class="{ 'v-recommend-label': true, is_fixed: isfixed }">
				<u-dropdown>
					<u-dropdown-item @change="change1" v-model="value1" title="类型" :options="options1">
					</u-dropdown-item>
					<u-dropdown-item @change="change2" v-model="value2" title="星级" :options="options2">
					</u-dropdown-item>
					<u-dropdown-item @change="change3" v-model="value3" title="排序" :options="options3">
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<!-- 美食展示列表 -->
			<view class="v-recommend-content">
				<view class="v-recommend-content-item" v-for="heat in recommend" :key="heat.foodId">
					<view class="v-recommend-imgp" @click="gotoDetailPageByFoodId(heat.foodId)">
						<image class="v-recommend-imgp" :lazy-load-margin="0" :lazy-load="true" :src="urlHeat + heat.foodImage3" mode="aspectFill"></image>
					</view>
					<!-- 美食轮播图 -->
					<view class="v-recommend-content-slither" @click="gotoDetailPageByFoodId(heat.foodId)">
						<swiper class="v-recommend-content-slither" autoplay="true" interval="4000" circular="true"
							indicator-dots="true">
							<swiper-item>
								<image class="v-recommend-content-imgp" :lazy-load-margin="0" :lazy-load="true" :src="urlHeat + heat.foodImage1"
									mode="aspectFill">
								</image>
							</swiper-item>
							<swiper-item>
								<image class="v-recommend-content-imgp" :lazy-load-margin="0" :lazy-load="true" :src="urlHeat + heat.foodImage2"
									mode="aspectFill">
								</image>
							</swiper-item>
							<swiper-item>
								<image class="v-recommend-content-imgp" :lazy-load-margin="0" :lazy-load="true" :src="urlHeat + heat.foodImage3"
									mode="aspectFill">
								</image>
							</swiper-item>
						</swiper>
					</view>
					<view class="v-recommend-content-text">
						<view class="v-content-text-title">
							<text class="v-text-title">{{ heat.foodName }}</text>
							<view class="v-text-score">
								<u-rate :current="heat.foodScore" :disabled="true" active-color="#fdab2d"></u-rate>
							</view>
						</view>

						<view class="v-content-text-score2">
							<text>位置：{{ heat.foodLocation }}</text>
						</view>
						<view class="v-content-text-introduce">
							<text class="v-text-introduce-t" space="emsp">{{heat.foodIntroduce}}</text>
						</view>
					</view>
					<!-- <view class="v-content-item-br"> </view> -->
				</view>
				<u-loadmore :status="status" :load-text="loadText" />
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	const citySelector = requirePlugin("citySelector");
	// #endif

	export default {
		data() {
			return {
				urlHeat: "", //https://fine-food.xiamu.icu/
				// urlHeat3: "http://localhost:8080",
				urlHeat3: "", //https://fine-food.xiamu.icu
				//热门美食
				heatList: [],
				//特色美食
				recommend: [],
				pages: '',
				page: '1',

				//定位
				height: 30,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,

				//腾讯定位
				newCity: {},
				input: {
					province: "",
					city: "",
					area: "请选择定位",
				},
				// 条件列表
				// fixed:"全部地区",
				fixed: "长沙",
				type: "全部",
				star: "0",
				sort: "默认排序",
				keyword: "",

				isShowMask: false,

				// 吸顶
				rect: "",
				menutop: "290",
				isfixed: "",

				value1: 1,
				value2: 1,
				value3: 1,
				options1: [{
						label: "全部",
						value: 1,
					},
					{
						label: "小吃类",
						value: 2,
					},
					{
						label: "主食类",
						value: 3,
					},
				],
				options2: [{
						label: "全部",
						value: 1,
					},
					{
						label: "一星",
						value: 2,
					},
					{
						label: "二星",
						value: 3,
					},
					{
						label: "三星",
						value: 4,
					},
					{
						label: "四星",
						value: 5,
					},
					{
						label: "五星",
						value: 6,
					},
				],
				options3: [{
						label: "默认排序",
						value: 1,
					},
					{
						label: "热搜优先",
						value: 2,
					},
					{
						label: "好评优先",
						value: 3,
					},
				],
				//加载更多。。。
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
			};
		},
		onLoad() {
			this.getHeatList();
			this.getRecommend();
		},
		onReady() {},
		onShow() {
			// #ifdef MP-WEIXIN
			const selectedCity = citySelector.getCity();
			this.newCity = selectedCity;
			if (selectedCity != null) {
				this.fixed = selectedCity.name;
				//恢复数据初始状态
				this.recommend = []
				this.page = 1
				this.getRecommend();
			}
			console.log("定位信息：", this.newCity);
			// #endif
		},
		onPageScroll(e) {
			this.rect = e.scrollTop;
			console.log(this.menutop);
			if (this.rect > this.menutop) {
				this.isfixed = true;
			} else {
				this.isfixed = false;
			}
		},
		onReachBottom() {
			console.log("你好")
			if (this.page < this.pages) {
				this.status = 'loading';
				this.page++;
				this.getRecommend();
			} else {
				this.status = 'nomore';
			}
		},

		methods: {
			//下拉菜单分页查询
			change1(e) {

				this.type = this.options1[e - 1].label
				console.log("当前类型：" + this.options1[e - 1].label)
				//恢复数据初始状态
				this.recommend = []
				this.page = 1
				this.getRecommend();

			},
			change2(e) {
				this.star = e - 1
				console.log("当前星级：", e - 1)
				console.log("当前地区：" + this.fixed)
				//恢复数据初始状态
				this.recommend = []
				this.page = 1
				this.getRecommend();
			},
			change3(e) {
				this.sort = this.options3[e - 1].label
				console.log("当前排序：" + this.options3[e - 1].label)
				//恢复数据初始状态
				this.recommend = []
				this.page = 1
				this.getRecommend();
			},
			search(e) {
				uni.navigateTo({
					url: `/pages/search/search?keyword=${this.keyword}`,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					},
				});
			},
			getRecommend() {
				const {
					hostname
				} = this.$store.state.moduleCommon;
				const {
					urlImg
				} = this.$store.state.moduleCommon;
				this.urlHeat3 = hostname;
				this.urlHeat = urlImg + "/";
				uni.request({
					url: this.urlHeat3 + "/api/food/index/recommend", //
					method: "POST",
					data: {
						"fixed": this.fixed,
						"type": this.type,
						"star": this.star,
						"sort": this.sort,
						"page": this.page,
						"limit": "2",
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						// this.recommend = res.data.data.records;
						this.recommend.push.apply(this.recommend, res.data.data.records)
						this.pages = res.data.data.pages;
						console.log(this.recommend);
						console.log(this.pages);
					},
				});
			},

			details3() {
				this.$refs.usernameInput2.mapChooseLocation();
			},
			//跳转详情页
			gotoDetailPageByFoodId(foodId) {
				//   console.log("foodId", foodId);
				uni.navigateTo({
					url: `/pages/details/details?foodId=${foodId}`,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					},
				});
			},
			//获得热门美食列表
			getHeatList() {
				const {
					hostname
				} = this.$store.state.moduleCommon;
				this.urlHeat3 = hostname;
				this.urlHeat = hostname + "/";
				uni.request({
					url: this.urlHeat3 + "/api/food/index/heat/" + "5" + "/长沙", //仅为示例，并非真实接口地址。
					data: {},
					header: {},
					success: (res) => {
						this.heatList = res.data.data;
						// this.heatList.foodLocation = this.heatList.foodLocation.split('/')[1]
						// this.heatList.push.apply(this.heatList, res.data.data)
						console.log(this.heatList.foodLocation);
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	// 搜索加定位
	.v-u-search {
		width: 750rpx;
		height: 70rpx;
		position: fixed;
		top: var(--window-top);
		z-index: 1000;
		background-color: #ffffff;

		.v-u-search-position {
			// background-color: burlywood;
			width: 150rpx;
			height: 65rpx;
			display: inline-block;
			vertical-align: top;

			.search-position-block {
				// display: flex;
				// flex-direction: column:
				// justify-content: center;
				margin-top: 10rpx;
				margin-left: 10rpx;

				.search-position-text {
					display: inline-block;
					vertical-align: top;
					width: 120rpx;
					font-size: 25rpx;
					text-align: center;
					font-weight: bold;

					// overflow: hidden;
					// -webkit-line-clamp: 1;
					// text-overflow: ellipsis;
					// display: -webkit-box;
					// -webkit-box-orient: vertical;
				}

				.search-position-icon {
					margin-top: 7rpx;
					display: inline-block;
					vertical-align: top;
					width: 20rpx;
				}
			}
		}

		.v-u-search-content {
			background-color: #ffffff;
			width: 590rpx;
			height: 65rpx;

			display: inline-block;
			vertical-align: top;
			margin-left: 10rpx;
		}
	}

	// 热门美食
	.v-heat {
		width: 750rpx;
		// height: 460rpx;
		background-color: #ffffff;
		padding-top: 70rpx;

		.u-section {
			height: 80rpx;
			border-bottom: 1px solid #ccc;
		}

		.v-heat-scroll {
			background-color: #f8f9f9;
			// border:1px solid black ;
			box-sizing: border-box;
			white-space: nowrap;
			padding-right: 15rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			//  热门美食item
			.v-heat-item {
				background-color: #f8f9f9;
				width: 200rpx;
				height: 375rpx;
				// background: royalblue;
				display: inline-block;
				margin-left: 15rpx;

				.v-heat-item-img {
					height: 250rpx;
					width: 200rpx;
					border-radius: 25rpx;
				}

				.item-text-all {
					background-color: #ffffff;

					.v-heat-item-text {
						height: 37rpx;
						width: 200rpx;
						// background-color: chartreuse;
					}

					.v-heat-item-grade {
						height: 50rpx;
						width: 200rpx;
						// background-color: chartreuse;
					}
				}


			}
		}
	}

	// 地区特色美食
	.v-recommend {
		width: 750rpx;

		background-color: #f8f9f9;

		.v-recommend-head {
			background-color: #ffffff;
			height: 60rpx;
			width: 750rpx;
			padding: 20rpx 0rpx 0rpx 0rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		.v-recommend-label {
			background-color: #ffffff;
		}

		.is_fixed {
			position: fixed;
			// calc(var(--window-bottom) + 10px);
			// top: calc(var(--window-top)+70px);
			/* #ifdef MP */
			top: 70rpx;
			/* #endif */
			/* #ifdef H5 */
			top: 140rpx;
			/* #endif */
			z-index: 100;
			width: 750rpx;
		}

		// 美食展示列表
		.v-recommend-content {
			// background-color: #DEE1E6;
			padding: 15rpx;

			.v-content-item-br {
				background-color: #ffffff;
				height: 15rpx;
				border-top: 1px solid red;
			}

			.v-recommend-content-item {
				// background-color: #FFFFFF;
				width: 720rpx;

				// margin: 15rpx;
				padding-top: 10rpx;
				margin-bottom: 10rpx;
				border-bottom: 1px solid red;

				.v-recommend-imgp {
					display: inline-block;
					height: 200rpx;
					width: 200rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}

				// 美食轮播图
				.v-recommend-content-slither {
					width: 500rpx;
					height: 200rpx;
					display: inline-block;

					.v-recommend-content-imgp {
						width: 500rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}

				.v-recommend-content-text {
					height: 200rpx;

					.v-content-text-title {
						height: 50rpx;
						background-color: #ffffff;

						.v-text-score {
							display: inline-block;
						}

						.v-text-title {
							display: inline-block;
							width: 520rpx;
							font-size: 30rpx;
							font-weight: bold;
						}
					}

					.v-content-text-score2 {
						height: 50rpx;
						background-color: #ffffff;
					}

					.v-content-text-introduce {
						height: 100rpx;
						background-color: #ffffff;

						.v-text-introduce-t {
							overflow: hidden;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
		}
	}
</style>
